<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="__ROOT__/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="__ROOT__/layui/css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="right-desc">
            <div class="layui-text desc-item">
                标签管理
            </div>

        </div>
        <div class="page-wrapper">
            <blockquote class="layui-elem-quote" style="margin: 15px 0;">
                编辑标签页面默认全部打开，并显示已选标签。可以单选，多选，选完后，点击"选好啦"按钮，然后点击"立即提交"按钮，改动生效。
            </blockquote>
            <div class="layui-btn-container" style="display: inline-block;">

                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
                <!--                <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">获取选中</button>-->

            </div>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe668;</i>展开全部
                </button>
                <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe66b;</i>折叠全部
                </button>
<!--                <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">-->
<!--                    <i class="layui-icon">&#xe605;</i>勾选添加用户-->
<!--                </button>-->
            </div>
            <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字"
                   style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#x1006;</i>清除搜索
                </button>
            </div>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-normal">选好啦</button>
            </div>
            <div class="demo-side">
                <table id="demoTreeTb"></table>
            </div>
        </div>

    </div>
</div>

<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-badge layui-bg-blue" lay-event="add">添加下级</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script src="__ROOT__/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="__ROOT__/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;

        $('body').removeClass('layui-hide');

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: '/index.php/admin/Tag/get_tags',
            height: 'full-200',
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'authorityId',
                pidName: 'parentId'
            },
            cols: [
                [
                    {type: 'numbers'},
                    {type: 'checkbox'},
                    {field: 'authorityName', minWidth: 100, title: '标签名称'},
                    {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
                ]
            ],
            style: 'margin-top:0;'
        });



        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        // 搜索
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });

        // 清除搜索
        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });
        // 获取选中
        $('#btnGetChecked').click(function () {
            var ids = '';
            var names = '';

             JSON.stringify(insTb.checkStatus().map(function (d)
                {
                names = names+' '+d.authorityName;
                ids = d.authorityId+','+ids;
                })
                , null, 3) ;
            //这是向 父页面 设置值
            window.parent.document.getElementById("tags").value = names;
            window.parent.document.getElementById("tagid").value = ids;
            setTimeout(function () {
                // window.parent.location.reload(); //刷新父页面
                var index = parent.layer.getFrameIndex(window.name)
                parent.layer.close(index);
            }, 500);
        });
        // 设置选中

        $('#btnChecked').click(function () {
            var tagsid = window.parent.document.getElementById("tagid").value;

            tagsid=tagsid.substring(0,tagsid.length-1);
            var arr = tagsid.split(',');

            // console.log(arr);

            insTb.expandAll();
            // insTb.setChecked(id);
            insTb.setChecked(arr);  // 设置选中数据
        });



        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            var mdata = obj.data;
            if (event === 'del') {
                layer.confirm('真的要删除该标签吗？', function (index) {
                    var url = "{:url('tag/del')}";
                    var data={'id':mdata.id};
                    var success = "{:url('tag/index')}";
                    //    执行异步请求 ，$.post
                    $.post(url,data,function(result){
                        if(result.status ==0){
                            layer.open({
                                content:result.message,
                                icon:2,
                                title : '错误提示'
                            });

                        }
                        if(result.status ==1){
                            layer.open({
                                content : result.message,
                                icon : 1,
                                yes : function(){
                                    setTimeout(function () {
                                        window.location.reload(); //刷新父页面
                                        // var index = parent.layer.getFrameIndex(window.name)
                                        // parent.layer.close(index);
                                    }, 500);
                                }
                            });

                        }
                    },'JSON');
                    return false;
                });
            }
            else if (event === 'edit') {
                var index = layer.open({
                    title: '修改本标签内容',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['60%', '40%'],
                    content: '/bang/public/index.php/admin/tag/edit?id='+mdata.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
            else if (event === 'add') {
                var index = layer.open({
                    title: '添加下级',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['60%', '40%'],
                    content: '/bang/public/index.php/admin/tag/add?id='+mdata.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });
        setTimeout(function () {
            var tagsid = window.parent.document.getElementById("tagid").value;

            tagsid=tagsid.substring(0,tagsid.length-1);
            var arr = tagsid.split(',');

            // console.log(arr);

            insTb.expandAll();
            // insTb.setChecked(id);
            insTb.setChecked(arr);  // 设置选中数据
        }, 500); //1s

    });

</script>
</body>
</html>